import { getGoodsList } from '@/src/api/Goods';
import React, { useEffect, useState } from 'react';
import { Image, ScrollView, StyleSheet, View } from 'react-native';

interface GoodsItem {
  id: number;
  picture: string;
}
export default function GoodsShow() {
  // [list是状态变量,setList是修改状态变量的方法]
  const [list, setList] = useState<GoodsItem[]>([]);
  // 获取商品列表数据
  const loadGetGoodsList = async () => {
    const result = await getGoodsList();
    // console.log('getGoodsList----->', result);
    setList(result.data.rows);
  };
  // 副作用来实现触发异步请求
  useEffect(() => {
    loadGetGoodsList();
  }, []);
  return (
    <ScrollView
      horizontal={true} //设置水平滚动
      showsHorizontalScrollIndicator={false} //隐藏水平滚动条
      style={styles.goodsShow}
    >
      {list.map((item) => {
        return (
          <View style={styles.goodsShowList} key={item.id}>
            <Image style={styles.img} source={{ uri: item.picture }}></Image>
          </View>
        );
      })}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  goodsShow: {
    // backgroundColor: '#ffff00',
    padding: 8,
    flexDirection: 'row',
  },
  goodsShowList: {
    // backgroundColor: '#f9f6f0',
    marginRight: 5,
  },
  img: {
    width: 70,
    borderRadius: 30,
    height: 70,
  },
});
